<!--
  组件面板 - ComponentPanel.vue
  左侧组件库面板，提供可拖拽的组件模板
  用户可以通过拖拽或点击的方式将组件添加到画布
-->
<template>
  <div class="component-panel">
    <!-- 面板标题 -->
    <div class="panel-header">
      <h3>组件库</h3>
    </div>
    
    <!-- 面板内容：包含各种组件分组 -->
    <div class="panel-content">
      <!-- 图表组件分组 -->
      <div class="component-group">
        <div class="group-title">
          <el-icon><TrendCharts /></el-icon>  <!-- 图表图标 -->
          <span>图表组件</span>
        </div>
        <!-- 图表组件列表 -->
        <div class="component-list">
          <div
            v-for="template in chartTemplates"     
            :key="template.type"                   
            class="component-item"                  
            draggable="true"                       
            @dragstart="handleDragStart($event, template)"  
            @click="addComponent(template)"        
          >
            <!-- 组件图标 -->
            <div class="component-icon">
              <el-icon><component :is="template.icon" /></el-icon>
            </div>
            <!-- 组件名称 -->
            <div class="component-name">{{ template.name }}</div>
          </div>
        </div>
      </div>

      <!-- 基础组件分组 -->
      <div class="component-group">
        <div class="group-title">
          <el-icon><Grid /></el-icon>  <!-- 网格图标 -->
          <span>基础组件</span>
        </div>
        <!-- 基础组件列表 -->
        <div class="component-list">
          <div
            v-for="template in basicTemplates"     
            :key="template.type"                   
            class="component-item"                  
            draggable="true"                       
            @dragstart="handleDragStart($event, template)"  
            @click="addComponent(template)"        
          >
            <!-- 组件图标 -->
            <div class="component-icon">
              <el-icon><component :is="template.icon" /></el-icon>
            </div>
            <!-- 组件名称 -->
            <div class="component-name">{{ template.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// Element Plus 图标组件导入
import { TrendCharts, Grid } from '@element-plus/icons-vue'
// 画布状态管理
import { useCanvasStore } from '@/stores/canvas'
// 组件模板配置
import { chartTemplates, basicTemplates } from '@/config/components'
// TypeScript 类型定义
import type { ComponentTemplate } from '@/types'

// 获取画布状态管理实例
const canvasStore = useCanvasStore()

// 处理拖拽开始事件：设置拖拽数据
const handleDragStart = (event: DragEvent, template: ComponentTemplate) => {
  if (event.dataTransfer) {
    // 设置拖拽传输的数据（JSON格式）
    event.dataTransfer.setData('application/json', JSON.stringify({
      type: 'component',    // 标识这是一个组件拖拽
      template             // 组件模板数据
    }))
    event.dataTransfer.effectAllowed = 'copy'  // 设置拖拽效果为复制
  }
}

// 添加组件到画布：点击组件时直接添加到画布中心
const addComponent = (template: ComponentTemplate) => {
  // 创建新的组件实例
  const component = {
    id: `comp_${Date.now()}`,              // 生成唯一ID（基于时间戳）
    type: template.type,                   // 组件类型
    name: template.name,                   // 组件名称
    style: { ...template.defaultStyle },   // 复制默认样式（避免引用传递）
    config: { ...template.defaultConfig }  // 复制默认配置（避免引用传递）
  }
  
  // 调用状态管理方法添加组件到画布
  canvasStore.addComponent(component)
}
</script>

<!--
  ComponentPanel组件样式定义
  包含面板布局、组件分组、组件项样式、交互效果等
-->
<style scoped>
/* 组件面板主容器 */
.component-panel {
  height: 100%;              /* 占满父容器高度 */
  display: flex;             /* 弹性布局 */
  flex-direction: column;    /* 垂直排列 */
}

/* 面板标题区域 */
.panel-header {
  padding: 20px;                           /* 内边距 */
  border-bottom: 1px solid var(--border-color);  /* 底部边框 */
}

/* 标题文字样式 */
.panel-header h3 {
  margin: 0;          /* 清除默认外边距 */
  font-size: 16px;    /* 字体大小 */
  font-weight: 500;   /* 字体粗细 */
}

/* 面板内容区域：可滚动的组件列表 */
.panel-content {
  flex: 1;              /* 占据剩余空间 */
  padding: 20px;        /* 内边距 */
  overflow-y: auto;     /* 垂直滚动 */
}

/* 组件分组容器 */
.component-group {
  margin-bottom: 30px;  /* 分组间距 */
}

/* 分组标题样式 */
.group-title {
  display: flex;                    /* 弹性布局 */
  align-items: center;              /* 垂直居中 */
  margin-bottom: 15px;              /* 底部间距 */
  font-size: 14px;                  /* 字体大小 */
  font-weight: 500;                 /* 字体粗细 */
  color: var(--text-secondary);     /* 次要文字颜色 */
}

/* 分组标题图标样式 */
.group-title .el-icon {
  margin-right: 8px;    /* 右侧间距 */
  font-size: 16px;      /* 图标大小 */
}

/* 组件列表：网格布局 */
.component-list {
  display: grid;                        /* 网格布局 */
  grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  gap: 12px;                            /* 网格间距 */
}

/* 组件项基础样式 */
.component-item {
  display: flex;                        /* 弹性布局 */
  flex-direction: column;               /* 垂直排列 */
  align-items: center;                  /* 水平居中 */
  padding: 16px 8px;                    /* 内边距 */
  background: rgba(255, 255, 255, 0.05); /* 半透明白色背景 */
  border: 1px solid var(--border-color); /* 边框 */
  border-radius: 8px;                   /* 圆角 */
  cursor: pointer;                      /* 指针光标 */
  transition: all 0.3s ease;            /* 所有属性过渡动画 */
  user-select: none;                    /* 禁止文字选择 */
}

/* 组件项悬停效果 */
.component-item:hover {
  background: rgba(255, 255, 255, 0.1);  /* 更亮的背景 */
  border-color: var(--primary-color);    /* 主题色边框 */
  transform: translateY(-2px);           /* 向上移动2像素 */
}

/* 组件项按下效果 */
.component-item:active {
  transform: translateY(0);              /* 恢复原位置 */
}

/* 组件图标样式 */
.component-icon {
  margin-bottom: 8px;           /* 底部间距 */
  font-size: 24px;              /* 图标大小 */
  color: var(--primary-color);  /* 主题色 */
}

/* 组件名称样式 */
.component-name {
  font-size: 12px;              /* 字体大小 */
  text-align: center;           /* 文字居中 */
  color: var(--text-color);     /* 文字颜色 */
  line-height: 1.2;             /* 行高 */
}

/* 拖拽时的样式：降低透明度表示正在拖拽 */
.component-item[draggable="true"]:active {
  opacity: 0.8;                 /* 80%透明度 */
}
</style>